<template>
  <div>
    <a-divider>申请表单关联</a-divider>
    <a-form-item label='申请表单标题' v-bind="formItemLayout">
      <a-input v-model="configData.formTitle" @change="dataChange"/>
    </a-form-item>
    <a-form-item label='申请表单类型' v-bind="formItemLayout">
      <a-radio-group button-style="solid" v-model="configData.formType" @change="dataChange">
        <a-radio-button value="0">系统表单</a-radio-button>
        <!--            自定义表单暂未实现-->
        <a-radio-button value="1" disabled>自定义表单</a-radio-button>
      </a-radio-group>
    </a-form-item>
    <a-form-item v-if="configData.formType==='1'" label='申请表单路径' v-bind="formItemLayout">
      <a-input @change="dataChange"/>
    </a-form-item>
    <a-form-item v-if="configData.formType==='0'" label='申请表单关联' v-bind="formItemLayout">
      <a-space direction="vertical">
        <a-select show-search :filter-option="filterOption" v-model="configData.formId" @change="dataChange">
          <a-select-option v-for="r in formData" :key="r.formId">{{ r.formName }}</a-select-option>
        </a-select>
        <div>
          <a-space>
            <a @click="viewForm()">预览</a>
            <a @click="editForm()">编辑</a>
            <a @click="addForm()">创建</a>
          </a-space>
        </div>
      </a-space>
    </a-form-item>
    <!-- 起始节点时选择图标 -->
    <a-form-item label='显示图标' v-bind="formItemLayout">
      <a-input ref="icons" v-model="configData.formIcon" placeholder="点击右侧按钮选择图标" @change="dataChange">
        <a-icon v-if="configData.formIcon" slot="suffix" type="close-circle" @click="deleteIcons"/>
        <a-icon slot="addonAfter" type="setting" style="cursor: pointer" @click="chooseIcons"/>
      </a-input>
    </a-form-item>
    <a-divider>起始权限控制</a-divider>
    <a-form-item label='可使用的角色' v-bind="formItemLayout">
      <a-select
        mode="multiple"
        :allowClear="true"
        style="width: 100%"
        v-model="configData.roleNames"
        @change="dataChange">
        <a-select-option v-for="r in roleData" :key="r.roleName">{{ r.roleName }}</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label='可使用的用户' v-bind="formItemLayout">
      <a-select
        mode="multiple"
        :allowClear="true"
        style="width: 100%"
        @change="dataChange"
        v-model="configData.userIds">
        <a-select-option v-for="r in userData" :key="r.username">{{ r.username }}</a-select-option>
      </a-select>
    </a-form-item>
    <a-divider>启动规则</a-divider>
    <a-form-item label="后端验证规则"  v-bind="formItemLayout" extra="表单提交时通过后端规则校验，不通过时不能启动流程。">
      <span>已配置{{configData.summitRule.fsRules.length}}个规则 | <a @click="editFlowRulePluginsFS">配置</a></span>
    </a-form-item>
    <a-form-item label='准入规则' v-bind="formItemLayout" extra="启动流程时的关联初始化数据校验规则，不通过时不能启动流程。">
      <a-radio-group v-model="configData.accessRule.type" button-style="solid" size="small">
        <a-radio-button value="1">
          Aviator
        </a-radio-button>
        <a-radio-button value="2">
          规则插件
        </a-radio-button>
      </a-radio-group>
      <div v-if="configData.accessRule.type === '1'">
        <a-textarea placeholder="aviator表达式" v-model="configData.accessRule.aviatorExpression"
                    :auto-size="{ minRows: 5}" @change="dataChange"/>
      </div>
      <div v-if="configData.accessRule.type === '2'">
        <span>已配置{{configData.accessRule.accRules.length}}个规则 | <a @click="editFlowRulePluginsACC">配置</a></span>
      </div>
    </a-form-item>
    <view-form ref="ViewForm"></view-form>
    <form-config ref="FormConfig" @success="getForms"></form-config>
    <!-- 图标选择 -->
    <icons @choose="handleIconChoose" @close="handleIconCancel" :iconChooseVisible="iconChooseVisible"></icons>
    <flow-rule-plugin-config @change="dataChange" v-model="configData.summitRule.fsRules" ref="FlowRulePluginConfigFS"></flow-rule-plugin-config>
    <flow-rule-plugin-config @change="dataChange" v-model="configData.accessRule.accRules" ref="FlowRulePluginConfigACC"></flow-rule-plugin-config>
  </div>
</template>
<script>
import ViewForm from '../../formConfig/ViewForm'
import FormConfig from '../../formConfig/FormConfig'
import Icons from '../../../system/menu/Icons'
import FlowRulePluginConfig from "./FlowRulePluginConfig";

const formItemLayout = {
  labelCol: {span: 8},
  wrapperCol: {span: 14}
}
export default {
  name: 'StartNodeConfig',
  components: {ViewForm, FormConfig, Icons, FlowRulePluginConfig},
  props: {
    configData: {
      type: Object,
      default: () => ({
        // 对应后端 CustomStartNode
        userIds: undefined,
        roleNames: undefined,
        formId: '',
        formPath: '',
        formTitle: '',
        formIcon: '',
        formType: '0',
        summitRule: {
          fsRules: []
        },
        accessRule: {
          type: '',
          aviatorExpression: '',
          accRules: []
        }
      })
    }
  },
  model: {
    prop: 'configData',
    event: 'input'
  },
  data() {
    return {
      loading: false,
      formItemLayout,
      roleData: [],
      userData: [],
      formData: [],
      iconChooseVisible: false
    }
  },
  methods: {
    editFlowRulePluginsFS() {
      this.$refs.FlowRulePluginConfigFS.edit('后端表单验证规则', 'FSRule')
    },
    editFlowRulePluginsACC() {
      this.$refs.FlowRulePluginConfigACC.edit('准入验证规则', 'ACCRule')
    },
    dataChange() {
      this.$emit('input', this.configData)
    },
    getForms() {
      this.$get('form').then((r) => {
        this.formData = r.data.rows
      })
    },
    getUsers() {
      this.$get('user').then((r) => {
        this.userData = r.data.rows
      })
    },
    getRoles() {
      this.$get('role/getAll').then((r) => {
        this.roleData = r.data
      })
    },
    handleIconChoose(value) {
      this.configData.formIcon = value
      this.iconChooseVisible = false
    },
    handleIconCancel() {
      this.iconChooseVisible = false
    },
    chooseIcons() {
      this.iconChooseVisible = true
    },
    deleteIcons() {
      this.configData.formIcon = ''
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    viewForm() {
      // 当前选中的表单json
      let formId = this.configData.formId
      if (formId == null) {
        this.$message.warning('请从左侧先选择表单')
        return
      }
      let data = this.formData.find(value => value.formId === formId)
      this.$refs.ViewForm.onOpen(data)
    },
    editForm() {
      let formId = this.configData.formId
      if (formId == null) {
        this.$message.warning('请从左侧先选择表单')
        return
      }
      let data = this.formData.find(value => value.formId === formId)
      this.$refs.FormConfig.onOpen(data)
    },
    addForm() {
      let record = {}
      record.formJson = FormConfig.initJSON
      this.$refs.FormConfig.onOpen(record)
    }
  },
  mounted() {
    this.getForms()
    this.getRoles()
    this.getUsers()
  }
}
</script>
